<template>
  <el-dialog
    :visible="wxpayVisible"
    top="20vh"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="handleClose"
    width="500px"
    title="微信支付"
  >
    <div class="wxpay-dialog-wrapper">
      <div class="wxpay-dialog-header"><i class="edu-icon-weixin edu-icon--left"></i>微信支付</div>
      <div class="wxpay-dialog-global">
        <vue-qr :text="wxpayQrcode" :size="210" :margin="0"></vue-qr>
      </div>
      <div class="wxpay-dialog-footer">
        <i class="edu-icon-saoma edu-icon--left"></i>请使用微信扫描二维码以完成支付
      </div>
    </div>
  </el-dialog>
</template>

<script>
/**
 * vue-qr 常用属性介绍
  text 二维码内容
  size 二维码宽高大小，因为是正方形，所以设一个参数即可
  margin默认边距20px，不喜欢的话自己设为0
  colorDark 实点的颜色，注意要和colorLight一起设置才有效
  colorLight 空白的颜色，注意要和colorDark一起设置才有效
  bgSrc 嵌入背景图地址，没什么卵用，不建议设置
  logoSrc 二维码中间的图，这个是好东西，设置一下显得专业点
  logoScale 中间图的尺寸，不要设太大，太大会导致扫码失败的
  dotScale 那些小点点的大小，这个也没什么好纠结的，不建议设置了
 */
import vueQr from 'vue-qr'
import payment from '@/utils/payment.js'
export default {
  data() {
    return {
      wxpayQrcode: '',
      wxpayVisible: false
    }
  },
  components: {
    vueQr
  },
  methods: {
    // 关闭
    handleClose() {
      this.wxpayVisible = false
      clearInterval(payment.timer)
    }
  }
}
</script>

<style lang="scss" scoped>
.wxpay-dialog-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wxpay-dialog-header {
  color: #333333;
  font-size: 16px;
  display: flex;
  align-items: center;
  line-height: 1;
}

.wxpay-dialog-header .edu-icon-weixin {
  color: #3bb034;
  font-size: 24px;
}
.wxpay-dialog-global {
  padding: 9px;
  margin-top: 20px;
  border: 1px solid #e4e7ed;
  display: flex;
}
.wxpay-dialog-footer {
  margin-top: 22px;
  color: #5191ff;
  font-size: 13px;
  display: flex;
  align-items: center;
  height: 28px;
  border-radius: 14px;
  padding: 0 20px;
  line-height: 1;
  background: rgba(44, 146, 248, 0.05);
}
.wxpay-dialog-footer .edu-icon-saoma {
  font-size: 16px;
}
::v-deep .el-dialog__header {
  border-bottom: 1px solid #ebeef5;
}
</style>
